<template>
	<view class="box">
		<view class="top_wrapper hidden">
			<view class="top bg_f5 flex3">
				<navigator :url="url" open-type="redirectTo" hover-class="none" class="top_left flex3">
					<view class="font_27 text_bold">{{city_data.city}}</view>
					<image src="../../static/image/index/n@2x.png"></image>
				</navigator>
				<navigator url="./search?back=true" hover-class="none" class="w_flex1 flex1">
					<view class="w_flex1">
						<view style="height: 100%;" class="flex3" v-if="hot_data">
							<view class="font_31 van-ellipsis">{{hot_data.region_name}}</view>
						</view>
						<swiper class="swiper hidden" autoplay circular vertical v-else>
							<swiper-item>
								<view class="font_31 color_ac van-ellipsis">搜索地点查找附近寄存点</view>
							</swiper-item>
							<swiper-item>
								<view class="font_31 color_ac van-ellipsis">点击地图上的橙色图标即可预订</view>
							</swiper-item>
						</swiper>
					</view>
					<image src="../../static/image/index/b.png" class="top_icon"></image>
				</navigator>
			</view>
		</view>
		<!-- 地图 -->
		<view class="map_wrapper" v-if="is_map">
			<view class="main">
				<!-- <map subkey="NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU" layer-style="2" id="maps" show-location -->
				<map subkey="YCQBZ-5WMCW-CLERI-Y7HKG-MAAVE-R4BHV" layer-style="2" id="maps" show-location
					:longitude="hot_data?hot_data.lng: city_data.longitude"
					:latitude="hot_data?hot_data.lat: city_data.latitude" :markers="markers_list" :scale="scale"
					@markertap="get_mark" @regionchange="get_reg"></map>
			</view>
			<view class="map_icon" @click="get_scale">
				<image src="../../static/image/index/p@2x.png"></image>
			</view>
			<view class="map_centre">
				<image src="../../static/image/index/j1@2x.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 热门地点 -->
		<view v-else>
			<v-search></v-search>
		</view>
		<!-- 店铺显示 -->
		<view class="modal_wrapper bg_f5" v-if="show">
			<view class="modal_top_title"></view>
			<view class="modal_center hidden">
				<navigator :url="'./detail?id=' + store_id" hover-class="none" class="modal_list hidden"
					v-for="item in store_list" :key="item.id" v-if="item.id == store_id">
					<view class="modal_top flex1">
						<view class="modal_image">
							<image :src="item.image_text" class="bg_image"></image>
							<image src="../../static/image/index/r@2x.png" class="bg_icon"></image>
						</view>
						<view class="modal_content">
							<view class="font_35 text_bold">{{item.store_name}}</view>
							<view class="font_23 modal_m1" v-if="item.status == 1">营业时间：{{item.business_hours}}</view>
							<view class="font_23 modal_m1" v-else>停业中</view>
							<view class="flex3">
								<view class="font_23 color_7b w_flex1">{{item.address}}</view>
								<view class="font_31 text_bold modal_btn color_fff">预定</view>
							</view>
						</view>
					</view>
					<view class="modal_bottom flex1">
						<view class="modal_bottom_block font_23 color_fff" v-for="itemText in item.label_text"
							:key="itemText">{{itemText}}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search/index.vue';

	export default {
		components: {
			'v-search': search
		},
		data() {
			return {
				url: '',
				mapIocn: null,
				from_name: '',
				back_index: false,
				store_id: null,
				store_list: [],
				city_data: null,
				hot_data: null,
				markers_list: [],
				is_map: false, // 地图是否显示
				show: false, // 店铺是否展示
				scale: 10, // 地图缩放级别
				lastTapDiffTime: 0, // 双击
				lastTapTimeoutFunc: null, // 双击
			}
		},
		onLoad(e) {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');

			setTimeout(() => {
				this.from_name = e.type;
				this.mapIocn = uni.createMapContext('maps');
			}, 300)

			if (e.type === 'city') {
				// 城市
				this.url = './city_search?from=true';
				this.getStoreListByRegionName();
			}

			if (e.type === 'area') {
				// 热门地区
				this.url = './city_search?from=true&area=true';
				this.getStoreByHotRegionId();
			}

			if (e.show) {
				this.back_index = true;
			}
		},
		onShow() {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');

			if (this.from_name === 'city') {
				this.getStoreListByRegionName();
			}

			if (this.from_name === 'area') {
				this.getStoreByHotRegionId();
			}

			if (this.hot_data) {
				this.scale = 13;
			} else {
				this.scale = 10;
			}
		},
		onUnload(e) {
			if (this.back_index) {
				uni.reLaunch({
					url: './index'
				})

				return true;
			}
		},
		methods: {
			getStoreListByRegionName() {
				this.markers_list = [];

				this.$http.post(this.$api.getStoreListByRegionName, {
					region_name: this.city_data.city,
					lng: this.city_data.longitude,
					lat: this.city_data.latitude
				}).then(res => {
					let list_ = res.data;
					this.store_list = list_;

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }

					list_.forEach((n, k) => {
						this.markers_list.push({
							id: n.id,
							width: 32,
							height: 38,
							latitude: n.lat,
							longitude: n.lng,
							iconPath: '../../static/image/index/ｏ@2x.png'
						})
					})
				})
			},
			getStoreByHotRegionId() {
				this.markers_list = [];

				if (!this.hot_data) {
					this.getStoreListByRegionName();
					return
				}

				this.$http.get(this.$api.getStoreByHotRegionId, {
					region_id: this.hot_data.region_id
				}).then(res => {
					let list_ = res.data;
					this.store_list = list_;

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }

					list_.forEach((n, k) => {
						this.markers_list.push({
							id: n.id,
							width: 32,
							height: 38,
							latitude: n.lat,
							longitude: n.lng,
							iconPath: '../../static/image/index/ｏ@2x.png'
						})
					})
				})
			},
			// 标记点
			get_mark(e) {
				let markerId = e.detail.markerId;
				this.store_id = markerId;

				this.markers_list.forEach((n, k) => {
					if (n.id === markerId) {
						n.width = 40
						n.height = 50
						n.iconPath = '../../static/image/index/q@2x.png'
					} else {
						if (n.id) {
							n.width = 32
							n.height = 38
							n.iconPath = '../../static/image/index/ｏ@2x.png'
						}
					}
				})

				this.show = true;
			},
			// 双击放大地图
			get_scale() {
				let _this = this;

				_this.mapIocn.moveToLocation(); // 回到定位的地方
				return

				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				// 两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					// 双击
					_this.scale++;
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						// 单击
						_this.mapIocn.moveToLocation();
					}, 300);
				}
			},
			// 滑动地图
			get_reg() {
				this.show = false;

				this.markers_list.forEach((n, k) => {
					if (n.id) {
						n.width = 32
						n.height = 38
						n.iconPath = '../../static/image/index/ｏ@2x.png'
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.swiper {
		height: 54rpx;

		view {
			line-height: 54rpx;
		}
	}

	.top {
		width: 704rpx;
		height: 62rpx;
		margin: 12rpx auto 23rpx;
		border-radius: 12rpx;

		input {
			flex: 1;
		}
	}

	.top_left {
		height: 100%;
		margin-right: 23rpx;
		padding: 0 23rpx;
		border-right: 1px solid #fff;

		image {
			width: 17rpx;
			height: 17rpx;
			margin-left: 4rpx;
			margin-top: 18rpx;
		}
	}

	.top_icon {
		width: 34rpx;
		height: 34rpx;
		padding: 10rpx;
		margin: 0 23rpx;
	}

	.main {
		height: calc(100vh - 96rpx);

		map {
			width: 100%;
			height: 100%;
		}

		&.active {
			background-color: #fff;
		}
	}

	.map_icon {
		right: 17rpx;
		bottom: 200rpx;
		position: fixed;

		image {
			width: 127rpx;
			height: 127rpx;
		}
	}

	.modal_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		border-radius: 29rpx 29rpx 0 0;

		.modal_top_title {
			height: 33rpx;
			z-index: 99;
		}

		.modal_center {
			overflow-y: auto;
			max-height: 730rpx;
		}
	}

	.modal_list {
		width: 719rpx;
		padding: 0 31rpx;
		margin: 33rpx auto;
		border-radius: 23rpx;
		background-color: #fff;
		box-sizing: border-box;

		&:first-child {
			margin-top: 0;
		}

		.modal_top {
			margin-top: 23rpx;
			margin-bottom: 12rpx;
			padding-bottom: 12rpx;
			border-bottom: 1px dashed #D2D2D2;
		}

		.modal_image {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;
			margin-right: 29rpx;
			border-radius: 23rpx;

			.bg_image {
				width: 100%;
				height: 100%;
				filter: blur(4px);
			}

			.bg_icon {
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 33rpx;
				position: absolute;
			}
		}

		.modal_content {
			flex: 1;

			.modal_btn {
				margin-left: 38rpx;
				padding: 8rpx 12rpx;
				border-radius: 12rpx;
				background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
			}
		}

		.modal_m1 {
			margin: 8rpx 0;
		}

		.modal_bottom {
			.modal_bottom_block {
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
				margin-right: 23rpx;
				margin-bottom: 23rpx;

				&:first-child {
					background-color: #FE9A01;
				}

				&:nth-child(2) {
					background-color: #FDC400;
				}

				&:nth-child(3) {
					background-color: #4B7CE5;
				}
			}
		}
	}

	.map_wrapper {
		position: relative;

		.map_centre {
			top: 50%;
			left: 50%;
			position: absolute;
			-webkit-transform: translateX(-50%) translateY(-50%);

			image {
				width: 40rpx;
				height: 66rpx;
			}
		}
	}
</style>
